<template>
  <view class="goods-detail">
    <view class="good-img">
      <image src="@/static/images/home/car.jpg" mode=""></image>
    </view>
    <view class="good-info">
      <view class="good-title">
				{{info.name}} {{info.content}}
      </view>
      <view class="good-describe">
        {{info.list_time}} | {{info.energy}}
      </view>
      <view class="good-tags">
        <view class="tag-item" v-for="item in 2">
          准新车
        </view>
      </view>
    </view>
    <view class="good-price-info">
      <view class="good-status">
				{{state | stateToStr}}
      </view>
      <view class="good-price">
        ¥{{info.price}}万
      </view>
    </view>
    
  </view>
</template>

<script>
  export default {
		props:{
			info:{
				type:Object,
				default(){
					return {}
				}
			},
			state:{
				type:Number,
				default:0
			}
		},
    data() {
      return {

      };
    },
		filters:{
			stateToStr(state){
				if(state == 1){
					return '待签约'
				}else if(state == 2){
					return '待提车'
				}else if(state == 3){
					return '交易完成'
				}else if(state == 4){
					return '交易取消'
				}
			}
		}
  }
</script>

<style lang="scss" scoped>
  .goods-detail {
    display: flex;
    align-items: center;
    height: 250upx;

    .good-img {
      width: 35%;
      height: 200upx;

      image {
        width: 100%;
        height: 200upx;
        border-radius: 10upx;
      }
    }

    .good-info {
      width: 50%;
      height: 200upx;
      padding: 0 20upx 0;
      display: flex;
      flex-direction: column;

      .good-title {
        width: 100%;
        font-size: 28upx;
        display: -webkit-box;
        /**对象作为伸缩盒子模型展示**/
        -webkit-box-orient: vertical;
        /**设置或检索伸缩盒子对象的子元素的排列方式**/
        -webkit-line-clamp: 3;
        /**显示的行数**/
        overflow: hidden;
        /**隐藏超出的内容**/
      }

      .good-describe {
        color: #ccc;
        font-size: 24upx;
        flex: 1;
        display: flex;
        align-items: center;
      }

      .good-tags {

        display: flex;
        height: 28upx;

        .tag-item {
          padding: 0 4upx;
          height: 28upx;
          font-size: 18upx;
          color: #3c9cff;
          border: 1px solid #3c9cff;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10upx;
        }

      }
    }

    .good-price-info {
      width: 25%;
      font-size: 26upx;
      height: 200upx;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      .good-status{
        height: 60upx;
        color: #3c9cff;
      }
    }
  }
</style>
